<template>
  <el-drawer
    :title="isEdit?'修改接口':'新增接口'"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
    direction="rtl"
    custom-class="edit-drawer"
    ref="editDrawer"
    size="400px"
  >
    <div class="demo-drawer__content">
      <el-form label-width="auto" :rules="rules" :model="params" ref="editForm" size="small">

        <el-divider content-position="left">基础配置</el-divider>
        <el-form-item label="接口编码">
          <el-input placeholder="无需填写，自动生成" v-model="params.id" disabled></el-input>
          <div class="form-item-tip">后台自动生成，这里只作展示</div>
        </el-form-item>
        <el-form-item label="接口名称" prop="intName">
          <el-input placeholder="请输入接口名称" v-model="params.intName" :disabled="params.intPersist===1"></el-input>
        </el-form-item>
        <el-form-item label="接口分类" prop="intType">
          <el-input placeholder="请输入接口分类" v-model="params.intType"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" prop="intUrl">
          <el-input placeholder="请输入接口请求相对路径" v-model="params.intUrl" :disabled="params.intPersist===1"></el-input>
        </el-form-item>
        <el-form-item label="所属服务" prop="routId">
          <router-select v-model="params.routId" :disabled="params.intPersist===1" :clearable="false"></router-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input-number v-model="params.sort" :min="0"></el-input-number>
          <div class="form-item-tip">数字越小，优先越高</div>
        </el-form-item>

        <el-divider content-position="left">安全选项</el-divider>
        <el-form-item label="身份认证">
          <el-radio-group v-model="params.intAuth" :disabled="params.intPersist===1">
            <el-radio-button :label="2">关闭</el-radio-button>
            <el-radio-button :label="1">开启</el-radio-button>
          </el-radio-group>
          <div class="form-item-tip">关闭：不需要验证即可调用；开启：需要先验证是否有权限。</div>
        </el-form-item>
        <el-form-item label="公开访问">
          <el-radio-group v-model="params.intOpen">
            <el-radio-button :label="2">拒绝</el-radio-button>
            <el-radio-button :label="1">允许</el-radio-button>
          </el-radio-group>
          <div class="form-item-tip">拒绝：不允许通过网关调用，会提示「接口未公开」；允许：可以通过网关访问。</div>
        </el-form-item>

        <el-divider content-position="left">其他</el-divider>
        <el-form-item label="状态">
          <el-switch
            v-model="params.state"
            :active-value='1'
            :inactive-value='0'
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用">
          </el-switch>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="可输入备注" v-model="params.remark"></el-input>
        </el-form-item>
      </el-form>

      <div class="demo-drawer__footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">保 存</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import RouterSelect from '../../common/RouterSelect'

  export default {
    name: "AddEditApiDialog",
    components: {
      RouterSelect
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      editData: null
    },
    watch: {
      show () {
        this.visible = this.show;
        if(!this.editData){
          for(let k in this.params){
            this.params[k] = '';
          }
          this.params.sort = 0;
          this.params.intAuth = 1;
          this.params.intOpen = 1;
          this.params.intPersist = 2;
          this.params.state = 1;
          this.isEdit = false;
        }
      },
      editData: {
        handler() {
          if(this.editData){
            for(let k in this.params){
              this.params[k] = this.editData[k]?this.editData[k]:null;
            }
            this.isEdit = true;
          }
        },
        immediate: true,
        deep: true
      }
    }
    ,
    data() {
      return {
        visible: this.show,
        isEdit: false,
        params: {
          id: '',
          routId: '',
          intName: '',
          intUrl: '',
          intType: '',
          sort: 0,
          intAuth: 1,
          intOpen: 1,
          intPersist: 2,
          state: 1
        },
        rules: {
          intName: [
            {required: true, message: '接口名称不能为空', trigger: 'blur'}
          ],
          routId: [
            {required: true, message: '路由标识不能为空', trigger: 'blur'}
          ],
          intUrl: [
            {required: true, message: '接口URL不能为空', trigger: 'blur'}
          ],
          intType: [
            {required: true, message: '接口分类不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      saveEdit: function(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let _url = '';
            if(!this.isEdit){
              _url = '/bucket-system/gateway/api/interface/add';
            }else{
              _url = '/bucket-system/gateway/api/interface/update';
            }

            this.api.post(_url, this.params)
              .then((data) => {
                if(data.code===200){
                  this.visible=false;
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.$parent.query();
                }else{
                  this.$message.error(data.data);
                }
              });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-drawer__body {
    overflow: auto;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .edit-drawer {
    .demo-drawer__content {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 20px 20px 20px;
      overflow: auto;
      form {
        flex-grow: 1;
      }
      .demo-drawer__footer {
        display: flex;
        button {
          flex: 1;
        }
      }
    }
  }
  
</style>
